<template>
    <div>
<el-table
    :data="tableData.data"
    border
    style="width: 100%"
    @selection-change="handleSelectChange">
      <el-table-column
      type="selection"
      width="55"
      v-if="tableConfig.isSelected">
    </el-table-column>
    <template v-for="(item, index) in tableConfig.col">
        <el-table-column
      :prop="item.field"
      :label="item.label"
      :key="index"
      v-if="item.colType === 'slot'"
      >
        <template slot-scope="slotProps">
            <slot :row="slotProps.row" :name="item.slotName"></slot>
        </template>
    </el-table-column>
        <el-table-column
      :prop="item.field"
      :label="item.label"
      :key="index"
      v-else>
    </el-table-column>
    </template>
  </el-table>
  <div class="table-footer">
    <slot>
    </slot>
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageData.currentPage"
      :page-sizes="pageData.pageSizes"
      :page-size="pageData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total"
      v-if="tableConfig.isPage">
    </el-pagination>
  </div>
    </div>
</template>

<script>
import { reactive, onBeforeMount, watch } from '@vue/composition-api'
import getData from './getData'
import page from './page.js'
export default {
  props: {
    option: {
      type: Object,
      default: () => {},
      required: true
    },
    selectRow: {
      type: Array,
      default: () => []
    }
  },
  setup (props, { emit }) {
    // 加载数据模块
    const { getTableData, tableData: responseData } = getData()
    // 分页模块
    const { pageData, totalCount, handleSizeChange, handleCurrentChange } = page()
    // 表格配置参数
    const tableConfig = reactive({
      // 表格列配置
      col: [],
      isPage: true,
      isSelected: false,
      requestData: {}
    })
    const initConfig = () => {
      for (const key in tableConfig) {
        if (!Object.keys(props.option).includes(key)) continue
        tableConfig[key] = props.option[key]
      }
    }
    // 表格数据
    const tableData = reactive({
      data: []
    })
    watch(responseData, (newVal) => {
      tableData.data = newVal.data
      totalCount(newVal.total)
    })
    watch(pageData, (newVal) => {
      tableConfig.requestData.data.pageNumber = newVal.currentPage
      tableConfig.requestData.data.pageSize = newVal.pageSize
      getTableData(tableConfig.requestData)
    })
    // 复选框事件
    const handleSelectChange = (val) => {
      emit('update:selectRow', val)
    }
    // 刷新数据
    const refreshData = () => {
      getTableData(tableConfig.requestData)
    }
    // 搜索数据
    const searchData = (key, keyWord) => {
      for (const key in tableConfig.requestData.data) {
        if (key === 'pageNumber' || key === 'pageSize') continue
        tableConfig.requestData.data[key] = ''
      }
      tableConfig.requestData.data[key] = keyWord
      tableConfig.requestData.data.pageNumber = 1
      pageData.currentPage = 1
      getTableData(tableConfig.requestData)
    }
    // 生命周期
    onBeforeMount(() => {
      initConfig()
      getTableData(tableConfig.requestData)
    })
    return {
      tableData,
      tableConfig,
      handleSizeChange,
      handleCurrentChange,
      pageData,
      handleSelectChange,
      refreshData,
      searchData
    }
  }
}
</script>

<style lang="scss" scoped>
  .table-footer {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
  }
</style>
<!--
组件引用方式 import MyTable from '@/components/MyTable'

组件属性参数
option 说明:表格配置对象   数据类型:Object

option可选属性
col 说明:列的标签、对应字段名、显示方式等属性   数据类型:Array
requestData 说明：请求相关参数 数据类型 Object
isSelected 说明：是否开启checkbox列 数据类型Boolean
isPage 说明: 是否开启分页 数据类型Boolean

requestData对象中可选属性:
url 说明:请求地址
method 说明：请求方式
data: 请求体中的参数

col数组中对象属性可选值:
label 说明:表头显示标签
field 说明：对应数据的字段名
colType 说明: 列显示的类型 可选值: 'slot' 说明:插槽显示 (当值是slot时需与slotName)
slotName 说明: 插槽名字 (列类型需要是slot才生效)

组件method
refreshData() 说明: 按照原请求参数刷新数据

组件默认插槽 位于表格左下方

示例
模板:
<MyTable :option="tableOptions">
       <template v-slot:status="slotProps">
         <el-switch
         active-value="1"
         inactive-value="2"
  v-model="slotProps.row.status"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
       </template>
       <template slot="operation">
         <el-button type="warning">编辑</el-button>
         <el-button type="danger">删除</el-button>
       </template>
      //  默认插槽
       <template>
         <el-button>批量删除</el-button>
       </template>
     </MyTable>

配置对象
  const tableOptions = reactive({
      col: [{
        label: '用户名',
        field: 'username'
      },
      {
        label: '真实名字',
        field: 'truename'
      },
      {
        label: '手机号',
        field: 'phone'
      },
      {
        label: '地区',
        field: 'region'
      },
      {
        label: '角色',
        field: 'role'
      },
      {
        label: '状态',
        field: 'status',
        colType: 'slot',
        slotName: 'status'
      },
      {
        label: '操作',
        colType: 'slot',
        slotName: 'operation'
      }],
      requestData: {
        url: 'getUserList',
        method: 'post',
        data: {
          pageNumber: 1,
          pageSize: 5
        }
      },
      isSelected: true,
      isPage: true
    })
-->
